<template>
  <div class="homepage">
    <div class="content">
      <div class="rightPanel">
        <div
          class="rightPanel-card"
          style="width: calc(66.6% - 24px); height: 338px"
        >
          <div class="rightPanel-card-title">
            <div class="rightPanel-card-title-left">
              <img
                class="rightPanel-card-title-left-img"
                src="./招标信息.png"
              />
              <span class="rightPanel-card-title-left-name">招标信息</span>
            </div>
          </div>
          <div class="rightPanel-card-table">
            <div class="rightPanel-card-table-firstline">
              <div style="width: 10%">类型</div>
              <div style="width: 50%">招标内容</div>
              <div style="width: 20%">时间</div>
              <div style="width: 20%">中标单位</div>
            </div>
            <div
              class="rightPanel-card-table-line"
              v-for="(item, index) in biddingInfo"
              :key="index"
              @click="gotoFunc('newWindow', item.link)"
            >
              <div style="width: 10%">{{ item.type }}</div>
              <div
                style="width: 50%; font-size: 16px"
                class="rightPanel-card-table-line-text"
              >
                {{ item.name }}
              </div>
              <div style="width: 20%; font-size: 13px; color: #666">
                {{ item.dt }}
              </div>
              <div style="width: 20%; font-size: 13px; color: #666">
                {{ item.gys }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="rightPanel-bar"
          style="width: calc(33.3% - 24px); height: 338px"
        >
          <echart-bar v-if="isReload" class="panel-bar-item" :options="barOptions" />
        </div>
        <div
          class="rightPanel-card"
          style="width: calc(33.3% - 24px); height: 338px"
        >
          <div class="rightPanel-card-title">
            <div class="rightPanel-card-title-left">
              <img
                class="rightPanel-card-title-left-img"
                src="./中标信息.png"
              />
              <span class="rightPanel-card-title-left-name">合同信息</span>
            </div>
            <div
              class="rightPanel-card-title-right"
              style="display: none"
              @click="gotoFunc('link', '')"
            >
              <span class="rightPanel-card-title-right-text">全部</span>
              <img
                class="rightPanel-card-title-right-icon"
                src="./ic_arrow.png"
              />
            </div>
          </div>
          <div class="rightPanel-card-table">
            <div class="rightPanel-card-table-firstline">
              <div style="width: 40%">合同名称</div>
              <div style="width: 40%">合同编号</div>
              <div style="width: 20%">签订状态</div>
            </div>
            <div
              class="rightPanel-card-table-line"
              v-for="(item, index) in contractInfo"
              :key="index"
              @click="gotoFunc('newWindow', item.link)"
            >
              <div style="width: 40%">{{ item.name }}</div>
              <div style="width: 40%; font-size: 13px; color: #666">
                {{ item.seq }}
              </div>
              <div style="width: 20%">
                {{ item.state }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="rightPanel-card"
          style="width: calc(33.3% - 24px); height: 338px"
        >
          <div class="rightPanel-card-title">
            <div class="rightPanel-card-title-left">
              <img
                class="rightPanel-card-title-left-img"
                src="./中标信息.png"
              />
              <span class="rightPanel-card-title-left-name">发货信息</span>
            </div>
            <div
              class="rightPanel-card-title-right"
              style="display: none"
              @click="gotoFunc('link', '')"
            >
              <span class="rightPanel-card-title-right-text">全部</span>
              <img
                class="rightPanel-card-title-right-icon"
                src="./ic_arrow.png"
              />
            </div>
          </div>
          <div class="rightPanel-card-table">
            <div class="rightPanel-card-table-firstline">
              <div style="width: 40%">订单名称</div>
              <div style="width: 40%">预定送达时间</div>
              <div style="width: 20%">发货状态</div>
            </div>
            <div
              class="rightPanel-card-table-line"
              v-for="(item, index) in unSendOrder"
              :key="index"
              @click="gotoFunc('newWindow', item.link)"
            >
              <div style="width: 40%">{{ item.name }}</div>
              <div style="width: 40%; font-size: 13px; color: #666">
                {{ item.dt }}
              </div>
              <div style="width: 20%">
                {{ item.state }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="rightPanel-card"
          style="width: calc(33.3% - 24px); height: 338px"
        >
          <echart-pie v-if="isReload" class="panel-bar-item" :options="pieOptions" />
        </div>
        <div class="rightPanel-footer">
          @该方案为奥哲网络科技有限公司版权所有
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Model } from "vue-property-decorator";
import OAuthApi from "@/apis/oauth";
import { utils } from "@cloudpivot/common";

import { Menu, Icon } from "@h3/antd-vue";
import { baseURL } from "tinymce";
import Axios from "axios";
import { homeApi, userApi } from "@cloudpivot/api";
import EchartBar from "./bar.vue";
import EchartPie from "./pie.vue";

@Component({
  name: "Login",
  components: {
    AIcon: Icon,
    AMenu: Menu,
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item,
    AMenuItemGroup: Menu.ItemGroup,
    EchartBar,
    EchartPie,
  },
})
export default class Home extends Vue {
  current: any[] = ["mail"];
  userInfo = {
    img: "./头像.png",
    name: "Admin",
  };

  barOptions: Charts.BarOptions = {
    chartTitle: "当月采购金额",
    x: [],
    rotate: 0,
    series: [{
      data: [],
      type: "bar",
      stack: "one",
      name: "当月采购金额",
      color: "#54A0F8",
    }],
  };

  pieOptions: Charts.BarOptions = {
    chartTitle: "年度金额",
    list: []
  };

  biddingInfo = [];

  contractInfo = [];

  unSendOrder = [];

  limit: string = '';

  isReload: boolean = true;

  reload() {
    this.isReload = false;
    this.$nextTick(function () {
      this.isReload = true;
    });
  }

  gotoFunc(type: string, goto: string) {
    switch (type) {
      case "func":
        eval("this." + goto);
        break;
      case "link":
        this.$router.push({ name: goto }).catch((err: any) => {
          err;
        });

        break;
      case "outlink":
        window.location.href = goto;
        break;
      case "newWindow":
        window.open(goto, "_blank");
        break;
    }
    console.log(type, goto);
  }
  async created() {
    let user: any = window.sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
    } else {
      user = { id: "", name: "" };
    }
    var userinfo: any = await userApi.getUserInfo(user.id);

    if (userinfo.data) {
      this.userInfo = {
        img: userinfo.data.imgUrl == null ? "./头像.png" : userinfo.data.imgUrl,
        name: userinfo.data.name,
      };
    }

    let that = this;
 
    await Axios.get(
      "/api/contractmgt/getType?id="  + user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取权限类型失败");
      } else if (res.errmsg == "无数据") {
        alert("权限类型无数据");
      } else {
          that.limit = res.data + '';
      }
    });

    await Axios.get(
      "/api/contractmgt/zbxxList?type="+that.limit+"&userId=" +
        user.id + "&pageNumber=1" + "&pageSize=50"
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取招标信息失败");
      } else if (res.errmsg == "无数据") {
        alert("招标信息无数据");
      } else {
        that.biddingInfo = [];
        for (var item in res.data) {
          that.biddingInfo.push({
            id: item,
            dt: res.data[item].createdTime,
            name: res.data[item].XMName,
            type: res.data[item].leixing,
            link: res.data[item].pcUrl,
            gys: "供应商无数据",
          });
        }
      }
    });

    await Axios.get(
      "/api/contractmgt/fhdjList?type="+that.limit+"&userId=" +
        user.id + "&pageNumber=1" + "&pageSize=50"
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取待发货订单失败");
      } else if (res.errmsg == "无数据") {
        alert("待发货订单无数据");
      } else {
        that.unSendOrder = [];
        for (var item in res.data) {
          that.unSendOrder.push({
            id: item,
            name: res.data[item].xmName,
            state: res.data[item].shzt,
            dt: res.data[item].finishedDate,
            url: res.data[item].url,
          });
        }
      }
    });

    await Axios.get(
      "/api/contractmgt/hetongliebiao?type="+that.limit+"&userId=" +
        user.id + "&pageNumber=1" + "&pageSize=50"
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取采购合同失败");
      } else if (res.errmsg == "无数据") {
        alert("采购合同无数据");
      } else {
        that.contractInfo = [];
        for (var item in res.data) {
          that.contractInfo.push({
            id: item,
            name: res.data[item].contractNames,
            state: res.data[item].qdzt,
            seq: res.data[item].ContractNO,
            url: res.data[item].url,
          });
        }
      }
    });

    await Axios.get(
      "/api/contractmgt/htydjetj?type="+that.limit+"&userId=" +
        user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取招标信息失败");
      } else if (res.errmsg == "无数据") {
        alert("招标信息无数据");
      } else {
        that.barOptions.x = [];
        that.barOptions.series = [];
        let series = {
      data: [],
      type: "bar",
      stack: "one",
      name: "当月采购金额",
      color: "#54A0F8",
    };
        that.barOptions.chartTitle = res.data.title
        for (var item in res.data.data) {
          that.barOptions.x.push(item);
          series.data.push(res.data.data[item])
        }
        that.barOptions.series.push(series)
        that.reload();
      }
    });

    await Axios.get(
      "/api/subject/getYearItem?type="+that.limit+"&userId=" +
        user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取年度金额失败");
      } else if (res.errmsg == "无数据") {
        alert("招标信息无数据");
      } else {
        that.pieOptions.chartTitle = res.data.title
        that.pieOptions.list = [];
        for (var item in res.data.data) {
          that.pieOptions.list.push({
            value: res.data.data[item].price,
            name: res.data.data[item].name
          });
        }
        that.reload();
      }
    });
  }
}
</script>

<style lang="less" scoped>
.homepage {
  width: 100%;
  height: 100%;
  overflow: none;
  background-color: #f3f6fb;

  .nav {
    background-color: #4683eb;
    width: 100vw;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav-left {
      width: 50%;
      padding: 0 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        height: 35px;
      }

      div {
        height: 24px;
        width: 1px;
        background-color: #fff;
        display: inline-block;
        margin: 0 10px;
      }
    }
    .nav-right {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #fff;

      img {
        width: 22px;
        height: 22px;
      }

      .nav-right-name {
        padding: 0 8px;
      }

      .nav-right-middleline {
        height: 18px;
        width: 1px;
        background-color: #fff;
        display: inline-block;
        margin: 0 25px 0 10px;
      }

      .nav-right-operation {
        background-color: transparent;
        width: 150px;
        .nav-right-menu {
          background-color: transparent !important;
          color: #fff;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    justify-content: center;
    align-items: center;

    .leftMenu {
      width: 224px;
      height: 100%;
      background-color: #273972;

      .leftMenu-panel {
        background-color: #273972 !important;
        border: none !important;

        .leftMenu-panel-firstLine {
          color: #dfe6fd;
          font-weight: 700;
          font-size: 18px;
          padding: 15px 0 !important;
          height: 66px;
        }
        .leftMenu-panel-link {
          color: #4c8bf8;
          font-size: 14px;
        }
        .leftMenu-panel-link::after {
          border: none !important;
        }
        .ant-menu-item-selected.leftMenu-panel-link {
          background-color: rgba(223, 230, 253, 0.13);
        }
        .leftMenu-panel-withoutLink {
          color: rgba(223, 230, 253, 0.46);
          font-size: 14px;
          .leftMenu-panel-withioutLink-link {
            color: rgba(223, 230, 253, 1);
            font-size: 14px;
          }
        }
      }
    }
    .rightPanel {
      width: 100%;
      height: 100%;
      padding: 12px;
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;

      .rightPanel-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 12px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
        padding: 16px 21px;
        width: 100%;
        height: 100%;
      }

      .rightPanel-card {
        margin: 12px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
        padding: 16px 21px;
        overflow: hidden;

        .rightPanel-card-title {
          border-bottom: 1px dotted rgba(83, 112, 239, 0.22);
          padding: 0 4px 15px 4px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .rightPanel-card-title-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .rightPanel-card-title-left-img {
              height: 24px;
              width: 24px;
            }
            .rightPanel-card-title-left-name {
              font-size: 20px;
              font-weight: 700;
              margin-left: 5px;
            }
          }

          .rightPanel-card-title-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            cursor: pointer;

            .rightPanel-card-title-right-text {
              font-size: 13px;
              color: #737278;
              letter-spacing: 1px;
            }
            .rightPanel-card-title-right-text:hover {
              color: rgb(130, 185, 248);
            }
            .rightPanel-card-title-right-icon {
              height: 13px;
              width: 13px;
              margin-left: 2px;
            }
          }
        }

        .rightPanel-card-table {
          width: 100%;
          height: 270px;
          overflow: auto;

          .rightPanel-card-table-firstline {
            color: #aaa;
            font-size: 14px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 16px 17px 13px 17px;

            .rightPanel-card-table-firstline-name {
              width: 70%;
            }
            .rightPanel-card-table-firstline-dt {
              width: 30%;
            }
          }

          .rightPanel-card-table-line {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            padding: 11px 16px;

            .rightPanel-card-table-line-text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-right: 5px;
            }
          }

          .rightPanel-card-table-line:hover {
            background-color: #d6e5ff;
          }
        }
      }

      .rightPanel-footer {
        position: absolute;
        width: calc(100% - 240px);
        bottom: 40px;
        text-align: center;
        color: #999999;
      }
    }
  }
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  background-color: #fff !important;
}
.homepage .nav .nav-right .nav-right-operation .nav-right-menu {
  border: none;
}
.ant-menu-submenu > .ant-menu {
  background-color: #fff;
  border-radius: 4px;
}
</style>

<style lang="less">
.homepage .ant-menu-submenu > .ant-menu {
  background-color: transparent !important;
}
.homepage .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: transparent !important;
}

.homepage
  .content
  .leftMenu
  .leftMenu-panel
  .leftMenu-panel-withoutLink
  .leftMenu-panel-withioutLink-link:hover {
  background-color: #4683eb;
}
</style>